<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Naver::UX</title>
<link href="assets/css/naver_ux.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jindo.desktop.all.js"></script>
<script type="text/javascript" src="assets/js/jindo_component.js"></script>
<script type="text/javascript" src="assets/js/jindo_mobile_component.js"></script>
<style type="text/css">
.u_dsc {
	padding: 50px 10px 20px;
	background: url(../asset/img/ico_dsc.gif) no-repeat 50% 1.43em;
	font-size: 13px;
	text-align: center
}

.u_dsc h2 {
	color: #000;
	font-size: 13px;
}

.u_dsc_q {
	background-image: url(../asset/img/ico_dsc_q.gif)
}

.u_dsc_n {
	background-image: url(../asset/img/ico_dsc_n.gif)
}

.u_dsc .uc_h {
	font-size: 1em
}

.u_dsc .uc_st {
	font-weight: bold;
	color: #3AA6B5
}

.u_dsc .uc_st_q {
	font-weight: bold;
	color: #32a800
}

.u_dsc .uc_st_n {
	font-weight: bold;
	color: #FF6347
}

.u_dsc .uc_wn {
	white-space: nowrap
}

.u_dsc .uc_p {
	margin-top: 0.5em;
	color: #909090
}

.u_dsc .uc_area {
	margin-top: 1.25em
}

.u_dsc .u_btn {
	display: inline-block;
	padding: .36em .8em;
	border: 1px solid #bcbcbc;
	background: #f1f1f1;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff),
		color-stop(.05, #fbfbfb), to(#f1f1f1));
	font-size: 12px;
	color: #666;
	white-space: nowrap
}

.u_dsc .u_btn .uc_ico_ck {
	display: inline-block;
	margin-left: -.15em;
	padding-left: 1.4em;
	background: url(../asset/img/ico.gif) no-repeat 0 3px
}

.guioHeaderClose {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 28px;
	height: 28px;
	border: 0;
	background: none;
	cursor: pointer;
}
</style>

</head>
<body>

	<div id="demo">
		<button type="button" class="btn"
			onclick="oDialog.show();return false">Open Dialog</button>
		<br>
	</div>

	<script type="text/javascript">
		var nDelay = jindo.m.getDeviceInfo().android ? 1000 : 0;
		var oDialog = null;
		window.onload = function() {
			setTimeout(
					function() {

						var aTemplate = [];
						aTemplate
								.push('<div class="u_dsc u_dsc_n" style="background-color:#fff;border:2px solid #777777">');
						aTemplate
								.push('<h2 class="uc_h"><strong class="uc_st_n">sPosition : "center"</strong> Option</h2>');
						aTemplate.push('<div class="uc_area">');
						aTemplate
								.push('<a href="#" class="u_btn dialog-confirm" onclick="return false">Dialog가 <strong class="uc_st_n">화면 중앙</strong>에 위치합니다</a> ');
						aTemplate.push('</div>');
						aTemplate.push('</div>');
						var sTemplate = aTemplate.join("");

						oDialog = new jindo.m.Dialog({
							sPosition : "center"
						});
						oDialog.setTemplate(sTemplate);

						/*@code title="JavaScript"
						 var oDialog = new jindo.m.Dialog({ sPosition : "center" });

						 var sTemplate = "<div>...생략...</div>";
						 oDialog.setTemplate(sTemplate);
						 code@*/
					}, nDelay);
		}
	</script>

</body>
</html>